// 目标: 以插件的形式注册全局的组件
// 导入骨架屏组件
import XtxSkeleton from './skeleton/index.vue'
// 导入轮播图组件
import XtxCarousel from './carousel/index.vue'
// 导入查看更多组件
import XtxMore from './more/index.vue'
// 导入面包屑组件
import Bread from './bread/index.vue'
import BreadItem from './bread/item.vue'
// 导入城市选择组件
import XtxCity from './city/index.vue'
// 导入数量选择组件
import XtxNumbox from '@/components/numbox/index.vue'
import XtxButton from '@/components/button/index.vue'
import XtxCheckbox from '@/components/checkbox/index.vue'
import XtxMessage from '@/components/message/message.vue'

import defaultImg from '@/assets/images/200.png'
import { useIntersectionObserver } from '@vueuse/core'
import { App } from 'vue'
export default {
  // app是创建出来的应用实例 - vue库中内部提供好的实例类型
  install(app: App) {
    app.component('XtxSkeleton', XtxSkeleton)
    app.component('XtxCarousel', XtxCarousel)
    app.component('XtxMore', XtxMore)
    app.component('XtxBread', Bread)
    app.component('XtxBreadItem', BreadItem)
    app.component('XtxCity', XtxCity)
    app.component('XtxNumbox', XtxNumbox)
    app.component('XtxButton', XtxButton)
    app.component('XtxCheckbox', XtxCheckbox)
    app.component('XtxMessage', XtxMessage)

    // 自己封装的全局的指令 v-lazy
    // <img  src="hrefUrl"    />
    // <img  v-lazy="hrefUrl" />
    app.directive('lazy', {
      // inserted() 指令所在的元素被插入到页面中的时候触发
      // el 目标元素
      // binding 指令相关的信息
      mounted(el, { value }) {
        const { stop } = useIntersectionObserver(el, ([{ isIntersecting }]) => {
          if (isIntersecting) {
            // 已经进入到可视区了...
            el.src = value
            stop() // 停止监听

            // 如果图片加载失败, 显示默认的图片
            el.onerror = () => {
              el.src = defaultImg
            }
          }
        })
      }
    })
  }
}

